<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="bg">
        <div class="bg_item"></div>
        <div class="bg_item"></div>
    </div>
    <canvas id="canvas" width="1000" height="720"></canvas>
    <div style="display: none;">
        <img src="./skill/demon_hand/0.png" id="demon_hand0" alt="">
        <img src="./skill/demon_hand/1.png" id="demon_hand1" alt="">
        <img src="./skill/demon_hand/2.png" id="demon_hand2" alt="">
        <img src="./skill/demon_hand/3.png" id="demon_hand3" alt="">
        <img src="./skill/demon_hand/4.png" id="demon_hand4" alt="">
        <img src="./skill/demon_hand/5.png" id="demon_hand5" alt="">
        <img src="./skill/demon_hand/6.png" id="demon_hand6" alt="">
        <img src="./skill/demon_hand/7.png" id="demon_hand7" alt="">
        <img src="./skill/demon_hand/8.png" id="demon_hand8" alt="">
        <img src="./skill/demon_hand/9.png" id="demon_hand9" alt="">
        <img src="./skill/demon_hand/10.png" id="demon_hand10" alt="">
        <img src="./skill/demon_hand/11.png" id="demon_hand11" alt="">
        <img src="./img/user_plane/blue1_plane.png" id="plane" alt="" srcset="">
        <img src="./img/user_plane/foot.png" id="foot" alt="" srcset="">
        <img src="./img/user_plane/foot1.png" id="foot1" alt="" srcset="">
        <img src="./img/bullet/bullet1.png" id="bullet1" alt="" srcset="">
        <img src="./img/bullet/bullet2.png" id="bullet2" alt="" srcset="">
        <img src="./img/bullet/bullet3.png" id="bullet3" alt="" srcset="">
        <img src="./img/enemy_plane/enemy(1).png" id="enemy1" alt="" srcset="">
        <img src="./img/enemy_plane/enemy(2).png" id="enemy2" alt="" srcset="">
        <img src="./img/enemy_plane/enemy(3).png" id="enemy3" alt="" srcset="">
        <img src="./img/bullet/enemy_bullet1.png" id="enemy_bullet1" alt="" srcset="">
        <img src="./img/boom/0.png" id="boom0" alt="" srcset="">
        <img src="./img/boom/1.png" id="boom1" alt="" srcset="">
        <img src="./img/boom/2.png" id="boom2" alt="" srcset="">
        <img src="./img/boom/3.png" id="boom3" alt="" srcset="">
        <img src="./img/boom/4.png" id="boom4" alt="" srcset="">
        <img src="./img/boom/5.png" id="boom5" alt="" srcset="">
        <img src="./img/award/power_up.png" id="power_up" alt="">
        <img src="./img/award/wingman_buff.png" id="wingman_buff" alt="">
        <img src="./img/wingman/wingman1.png" id="red_wingman" alt="">
        <img src="./img/bullet/laser.png" id="laser" alt="" srcset="">
        <img id="boss_atk1" src="./img/bullet/boss2_atk.png" alt="" />
        <img id="boss_atk2" src="./img/bullet/other_atk2.png" alt=""/>
        <img id="boss_atk3" src="./img/bullet/other_atk3.png" alt=""/>
        <img src="./img/boss/boss1.png" id="women_boss">
        <img src="./img/bullet/enemy_bullet.png" id="test_bullet">
    </div>
    <div class="ui">
        <div class="user_msg">
            <div class="hp"></div>
            <div class="power"></div>
            <div class="start_list">

            </div>
        </div>
    </div>
    <div class="main_view">
        菜狗
        <div class="main_view_bottom">
            <div class="btn" onclick="refresh()">不服重来</div>
            <div class="btn">下次再说</div>
        </div>
    </div>
</body>
<script>
    const refresh=()=>{
        window.location.reload()
    }
</script>
<style>
    .main_view{
        
        width: 30vw;
        height: 20vh;
        border-radius: 10px;
        position: fixed;
        left: 50%;
        top: 50%;
        background: red;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 50px;
        font-family: cursive;
        font-weight: bold;
        display: none;
        
    }
    .main_view_bottom{
        position: absolute;
        bottom: -10%;
        font-size: 20px;
        display: flex;
        justify-content: space-between;
        width: 80%;
    }
    .main_view_bottom div{
        background: yellow;
        color: #6c1a1a;
        padding: 5px;
        border-radius: 7px;
        box-shadow: 0px 0px 5px #000;
    }
    body{
        opacity: .1;
    }
    .user_msg{
        width: 458px;
        height: 91px;
        position: fixed;
        bottom: 20px;
        left: 10px;
        background-image: url(./img/ui/kuangkuang.png);
        background-size: 100% 100%;
    }
    .hp{
        position: absolute;
        background-image: url(./img/ui/hp.png);
        background-size: 100% 100%;
        width: 287px;
        height: 14px;
        top: 11px;
        left: 103px;
        transition: width 2s linear;
    }
    .power{
        position: absolute;
        background-image: url(./img/ui/power.png);
        background-size: 100% 100%;
        width: 210px;
        height: 14px;
        top: 33px;
        left: 102px;
        transition: width 2s linear;
    }
    .bg{
        width: 100%;
        height: 100vh;
        overflow: hidden;
        position: absolute;
        z-index: -1;
    }
    .bg .bg_item{
        width: 100vw;
        height: 300vw;
        background-image: url(./light_bg.jpg);
        background-size: 100% 100%;
        margin-top: 0;
    }
    .bg_item:nth-of-type(1){
        margin-top: -300vw;
        /* animation: bg_scroll 30s linear 0s infinite ; */
    }
    @keyframes bg_scroll {
        to{
            margin-top: 0;
        }
    }
 body{
     margin: 0;
     padding: 0;
     
     background-size: 100% 100%;
     background-repeat: no-repeat;
     overflow: hidden;
 }
 
</style>

<script type="module" src="./js/main.js"></script>
</html>
